<template>
  <div class="prod-list">
    <el-row :class="['prods-header']">
      <el-input :class="['search-input']" placeholder="请输入商品名称" v-model="pageReqParams.query" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getPageFunction"></el-button>
      </el-input>
    </el-row>
    <el-row >
      <el-col :class="['prod-item']" :span="6" v-for="sku of pageInfo.list" :key="sku.id"
      >
        <el-image
          style="width: 200px; height: 200px;"
          :src="imageServer+'/'+sku.image"
          fit="fit"
          @click="handleItemClick(sku.spuId)"
        ></el-image>
        <div style="color: red; font-weight: bolder;"
             @click="handleItemClick(sku.spuId)"
        >
          ¥{{ (sku.price/100).toFixed(2)}}
        </div>
        <div style="font-size: 8px;"
             @click="handleItemClick(sku.spuId)"
        >
          {{sku.name}}
        </div>

      </el-col>
    </el-row>
    <el-pagination
      @size-change="handlePageSizeChange"
      @current-change="handleCurrentPageNumberChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="pageSizes"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "ProdList",
        data(){
          return {

            // 分页请求时要携带的参数
            pageReqParams: {
              query: '',
              pageNum: 1,
              pageSize: 20
            },
            // 分页信息
            pageInfo: {
              pageNum: 0,
              pageSize: 0,
              total: 0,
              totalPage: 0,
              list: []
            },
            // 分页的大小常量列表
            pageSizes: [50, 100, 200, 300],
          }
        },

        computed:{
          ...mapState({
            imageServer: state=>state.prod.imageServer
          })
        },
        created() {
          this.getPageFunction();
        },

        methods:{

          getPageFunction(){
            this.api.__api__SkusPage(this.pageReqParams)
              .then(data=>{
                this.pageInfo = data.data;
              }).catch(error=>null)
          },

          //处理分页大小败变
          handlePageSizeChange(size) {
            this.pageInfo.pageSize = size;
            this.pageReqParams.pageSize = size;
            this.getPageFunction();
          },

          //处理页选择
          handleCurrentPageNumberChange(pageNum) {
            this.pageReqParams.pageNum = pageNum;
            this.getPageFunction();
          },

          //处理商品点击
          handleItemClick(id){
            console.log("click: id="+id);
            this.$router.push({
              path:`/prod/details/${id}`
            })
          }
        }
    }
</script>

<style scoped>
  .prod-item{
    width: 200px;
    height:300px;
    border: 0px solid black;
    margin-bottom: 40px;
    margin-right:20px;
  }

  .search-input{
    width:600px;

  }

  .prods-header{
    margin:30px;
  }

</style>
